<template>
  <div class="allShop">
    <!-- <div class="content">
      <div class="table_caozuoAdd">
        <el-button type="primary" icon="plus" @click="addMendian"></el-button>
      </div>
    </div>-->
    <el-row :gutter="12">
      <el-col :span="4">
        <el-card shadow="never">
          <div class="couponCollectionList_card">发券数量</div>
          <div class="couponCollectionList_card">{{ruleForm.totalNum}}</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="never">
          <div class="couponCollectionList_card">已领取</div>
          <div class="couponCollectionList_card">{{ruleForm.ylq}}</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="never">
          <div class="couponCollectionList_card">已使用</div>
          <div class="couponCollectionList_card">{{ruleForm.ysy}}</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="never">
          <div class="couponCollectionList_card">未使用</div>
          <div class="couponCollectionList_card">{{ruleForm.wsy}}</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="never">
          <div class="couponCollectionList_card">未领取</div>
          <div class="couponCollectionList_card">{{ruleForm.wlq }}</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="never">
          <div class="couponCollectionList_card">已过期</div>
          <div class="couponCollectionList_card">{{ruleForm.ygq}}</div>
        </el-card>
      </el-col>
    </el-row>
    <avue-crud
      ref="crud"
      style="width:100%"
      :data="loadData"
      :option="tableOption"
      :table-loading="loading"
    >
      <template slot-scope="scope" slot="indexLabel">
        <span>{{scope.row.$index+(page.current - 1) * page.size + 1}}</span>
      </template>
    </avue-crud>
    <template>
      <div style="width:100%;position:relative;height:100px">
        <el-pagination
          :page-sizes="[10, 20,30,40, 50, 100]"
          :pager-count="7"
          :current-page="page.current"
          :page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin:2% 0;position:absolute;right:1%"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </template>
  </div>
</template>

<script src='./allShop.js'></script>

<style lang="scss">
.allShop {
  margin: 10px 0px;
}
.couponCollectionList_card {
  text-align: center;
  margin-bottom: 10px;
}
</style>